<template>
    <div>
        <el-form style="width:500px" ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name" disabled></el-input>
            </el-form-item>

            <el-form-item label="商品描述">
                <el-input v-model="form.subtitle" disabled></el-input>
            </el-form-item>
             <el-form-item label="商品状态">
                <el-input v-model="form.status==1 ? '已下架':'在售'" disabled></el-input>
            </el-form-item>

            <el-form-item label="所属分类">
                <el-select v-model="form.categoryId" disabled placeholder="请选择一级分类" >
                  <el-option
                      v-for="(item,index) in options"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        >
                      </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="商品价格">
                <el-input-number v-model="form.price" disabled :min="1" :max="99999" label="描述文字"></el-input-number>
            </el-form-item>

            <el-form-item label="商品库存">
                <el-input-number v-model="form.stock" disabled :min="1" :max="99999" label="描述文字"></el-input-number>
            </el-form-item>


            <el-form-item label="商品图片">
               <el-upload
              class="upload-demo"
              name="upload_file"
              multiple
              :limit="3"
              action="/api/product/upload.do"
              :on-preview="handlePreview"
              :before-remove="beforeRemove"
              :on-success ="handleSuccess"
              :on-exceed = "handleExceed"
              :before-upload = "beforeAvatarUpload"
            >
            <img class="image" :src="form.imageHost+form.subImages" alt="">
            <el-button size="small" type="primary">点击上传</el-button>

            </el-upload>
            </el-form-item>

             <el-form-item label="商品详情">
                <quill-editor
                    v-model="form.detail"
                    :options="editorOption"
                    @change="onEditorChange($event)"
                >
                </quill-editor>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {getcategory,LookFrom} from '../../http/index.js'
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
      components: { quillEditor },
  data() {
    return {
      form: {
        name: "",
        subtitle:'',
        price:'',
        stock:'',
        value:'',
        value1:'',
        detail:'',
      },
      options: [],
      options1: [],
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36"
                ]
              }
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"] // 链接、图片、视频
          ]
        },
        placeholder: "请输入正文"
      }
    };
  },
  mounted() {
      this.category()
      console.log('111',this.$route.query.lookid);
      this.look()
  },
  methods: {
    async category(){
        let res =await getcategory();
        this.options=res.data.data
        console.log(res);
    },
    addORedit(){
        SubmitFrom(
            // this.form
            {
                categoryId: 100001,
                name:this.form.name,
                subtitle:this.form.subtitle,
                subImages:'',
                detail:this.form.detail,
                price:this.form.price,
                stock:this.form.stock,
                status:1
            }
        ).then(res=>{
            this.$message.success(res.data.data)
            this.$router.go(-1)
        })
        console.log(this.form.value);
    },
    async look(){
       let res =await LookFrom({productId:this.$route.query.lookid})
       console.log('2222',res);
       this.form=res.data.data
    },
    onEditorChange(v) {
      console.log(v.text);
      this.form.detail = v.text;
    },
    handlePreview(file){
	   console.log(file)
	   // 相对地址
	   this.form.subImages = file.response.data.uri;
	},
	beforeRemove(file, fileList){
	   console.log(file, fileList)
	   return this.$confirm(`确定删除${file.name}`)
	},
	handleSuccess(response, file, fileList){
	 console.log(response)
	 console.log(file)
	 console.log(fileList)
	this.form.subImages = file.response.data.uri;
	},
	handleExceed(files, fileList){
		console.log(files)
		this.$message.warning(`当前限制选择3个文件，本次选择了${
			files.length
		}个文件,共选择了${files.length + fileList.length}个文件`)

	},
	// 限制图片类型及大小
	beforeAvatarUpload(file) {
		console.log(file)
		console.log(file.name)
		// 原生js能力   msg文件的后缀名
		let msg = file.name.substring(file.name.indexOf('.')+1)
		// console.log(msg)
		const extension = msg === 'jpg';
		const extension2 = msg === 'png';
		// 2M  size 文件的大小
		const size = file.size / 1024 /1024;
		console.log(size)

		if (!extension && !extension2) {
			this.$message({
			message:"上传文件只能是 jpg、png格式",
			type:"warning"
			})

		}
		if ( size>= 2) {
			this.$message({
			message:"上传文件大小不能超过2MB！",
			type:"warning"
			})
			return
		}
		return extension || extension2
	},
  },
};
</script>

<style lang="sass" scoped>

</style>